<template>
  <div class="app-main-container">
    <div class="app-main-title">
      新增通用消费
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> 返回上一页
      </div>
    </div>
    <div>
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        label-width="140px"
        label-suffix="："
        :rules="rules"
      >
        <el-form-item label="消费金额" prop="amot">
          <el-input
            v-model="param.amot"
            class="w400"
            oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
            placeholder="请输入消费金额(最多两位小数)"
          />
        </el-form-item>
        <el-form-item label="消费类型" class="select-style" prop="type">
          <el-select v-model="param.type" placeholder="选择消费类型" class="w400">
            <el-option
              v-for="item in configList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="param.info" placeholder="" />
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit()">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <orderDialog ref="child" @orderSuccess="getList" />
  </div>
</template>

<script>
import { configList, addConsumeGeneral } from '@/api'
import orderDialog from '@/components/order'
export default {
  name: 'FinanceDefaultSpendAdd',
  components: {
    orderDialog
  },
  data() {
    const validateMoney = (rule, value, callback) => {
      if (!value) {
        callback(new Error('金额不能为空'))
      } else if (value.indexOf('.') !== -1 && value.split('.').length > 2) {
        callback(new Error('请输入正确格式的金额')) // 防止输入多个小数点
      } else if (value.indexOf('.') !== -1 && value.split('.')[1].length > 2) {
        callback(new Error('请输入正确的小数位数')) // 小数点后两位
      } else {
        callback()
      }
    }
    return {
      subLoading: false,
      configList: [],
      param: {
        amot: '',
        type: '',
        info: ''
      },
      payMoney: '',
      changeMoney: 0.00,
      showMessage: false,
      cardMessage: {},
      cardPwd: '',
      dialogTableVisible: false,
      remark: '',
      hasLastPrice: false,
      lastPrice: {},
      selectProId: '',
      rules: {
        amot: [
          { required: true, message: '请输入消费金额', trigger: 'blur' },
          { required: true, validator: validateMoney, trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择消费类型', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCofigList()
  },
  methods: {
    // 限制只能输入数字或小数点
    validateNumber(value) {
      value = value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g, '')
      value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      if (value.indexOf('.') !== value.lastIndexOf('.')) {
        const index = value.lastIndexOf('.')
        value = value.substr(0, index)
      }
    },
    getCofigList() {
      configList({ param: { type: '72' }}).then(res => {
        this.configList = res.recordList
      }).catch(err => {
        console.log(err)
      })
    },
    onSubmit() {
      // const { param } = this
      // if (!param.amot.length) {
      //   this.$message.warning('请输入消费金额')
      //   return
      // }
      // if (!param.type.length) {
      //   this.$message.warning('请选择消费类型')
      //   return
      // }
      const param = { ...this.param }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.subLoading = true
          addConsumeGeneral({
            param: param
          })
            .then((res) => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                // this.dialogTableVisible = true
                this.orderMessgae = res.record
                this.$refs.child.continuePay(res.record, 'financeDefaultSpend')
              }
            })
            .catch(() => {
              this.subLoading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getList() {
      this.$router.replace(`/finance/financeDefaultSpend?renovate=1`)
    },
    cancelOrder() {
      // 取消支付
      this.dialogTableVisible = false
      this.orderMessgae = {}
      this.lastPrice = {}
      this.hasLastPrice = false
      this.selectedMessage = []
      this.closeMessage()
    },
    // 返回上一页
    goBack() {
      this.$router.replace(`/finance/financeDefaultSpend`)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
